<template>
    <el-card class="tax-infomation">
        <div class="title-container">
            <span class="rect"></span>
            <h3>税务信息</h3>
        </div>
        <!-- <h3>税务信息</h3> -->
        <el-divider></el-divider>
        <div class="echarts-container" ref="echartsContainer">

        </div>
    </el-card>
</template>


<script>
const wjApi = window.$api.enterpriseManagement.wjscms
export default {
    data() {
        return {
            info: [],
            lineArr: [],
            yAxisArr: [],
            option: {}
        }
    },
    props: {
        unifiedSocialCreditCode: {
            type: String,
            default: ""
        }
    },
    methods: {
        async init() {
            this.info = []
            this.lineArr = []
            this.yAxisArr = []
            this.option = {}
            console.log("🚀 ~ this.unifiedSocialCreditCode:", this.unifiedSocialCreditCode)
            var myChart = echarts.init(this.$refs.echartsContainer);
            if (this.unifiedSocialCreditCode) {
                let res = await wjApi.info(`http://221.224.136.227/wjscms/cf/service/DBService/CXSWXSXX`,
                    {
                        UID: this.unifiedSocialCreditCode,
                        type: "0",
                        f: "list"
                    }
                )
                this.info = res.Data
                this.info.forEach(i => {
                    this.lineArr.push(i.Taxdate)
                    this.yAxisArr.push(i.Actualpay)
                })
                this.lineArr.reverse()
                this.yAxisArr.reverse()
                this.option = {
                    xAxis: {
                        type: 'category',
                        data: this.lineArr
                    },
                    yAxis: {
                        type: 'value',
                    },
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show: true
                    },
                    tooltip: {
                        trigger: "axis",

                    },
                    grid: {
                        top: '10px',
                        bottom: '20px',
                        left: '45px',
                        right: '0px'
                    },
                    series: [
                        {
                            data: this.yAxisArr,
                            type: 'line'
                        }
                    ]
                };
                myChart.setOption(this.option);
            } else {
                console.log('pass');
                this.option = {
                    xAxis: {
                        type: 'category',
                        data: this.lineArr
                    },
                    yAxis: {
                        type: 'value',
                    },
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show: true
                    },
                    tooltip: {
                        trigger: "axis",

                    },
                    grid: {
                        top: '10px',
                        bottom: '20px',
                        left: '45px',
                        right: '0px'
                    },
                    series: [
                        {
                            data: this.yAxisArr,
                            type: 'line'
                        }
                    ]
                };
                myChart.setOption(this.option);
            }
        }
    },
    mounted() {
        // this.init()
    }
}
</script>


<style scoped lang='scss'>
.tax-infomation {
    width: 39.5%;
}

.echarts-container {
    width: 500px;
    height: 170px;
}

::v-deep .el-divider--horizontal {
    margin: 5px 0;
}
</style>